{{ block title }}
    Period {{ player.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}
{{ block content }}

{{  formfield 'initialSavings' label='test' }}

<h3>My Balances</h3>
<table class="table table-striped">
    <thead>
    <tr>
        <th>Starting Savings Balance</th>
        <th>Total Cash on Hand</th>
        <th>Final Savings Balance with Current Selection</th>
        <th>Final Stock Balance with Current Selection</th>
        <th></th>
    </tr>
    </thead>
    <tbody id="balances-body">

    </tbody>
</table>

<p>
<!-- Combine balances and items tables in one? -->
    <script>
        let myBalances = document.getElementById('balances-body');

        function liveRecv(data) {
            let html = '';
            for (let balance of data.balances) {
                html += `
<tr>
    <td>${cu(player.initialSavings)}</td>
    <td>${cu(balance.cashOnHand)}</td>
    <td>${cu(balance.finalSavings)}</td>
    <td>${cu(balance.stockBalance)}
</tr>`;
            }
            myBalances.innerHTML = html;
        }

    </script>

<h3>My Cart</h3>
<table class="table table-striped">
    <thead>
    <tr>
        <th>Name</th>
        <th>Quantity</th>
        <th>Total price</th>
        <th></th>
    </tr>
    </thead>
    <tbody id="cart-body">

    </tbody>
</table>

<p>
    <button class="btn btn-primary">
        Finalize Purchase (<b><span id="cart-total"></span></b>)
    </button>

    <script>
        let myCart = document.getElementById('cart-body');
        let cartTotal = document.getElementById('cart-total');
        let initialSavings = document.getElementById('cart-body');

        function cu(amount) {
            return `${amount} €`;
        }

        function liveRecv(data) {
            let html = '';
            for (let item of data.items) {
                html += `
<tr>
    <td>${item.name}</td>
    <td>${item.quantity}</td>
    <td>${cu(item.total_price)}</td>
    <td><button type="button" value="${item.sku}" onclick="removeFromCart(this)" class="btn btn-secondary">-1</button></td>
</tr>`
;

            }
            myCart.innerHTML = html;
            cartTotal.innerText = cu(data.total_price);            
        }


    </script>

<h3>Purchase</h3>
<div class="d-flex flex-wrap">
    {{ for p in C.PRODUCTS }}
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">{{ p.name }}</h5>
            <p class="card-text">
                Price: {{ p.unit_price }}
            </p>
            <button type="button" value="{{ p.sku }}" onclick="addToCart(this)" class="btn btn-secondary">+1</button>
        </div>
    </div>
    {{ endfor }}
</div>

<script>
    function addToCart(ele) {
        modifyCart(ele.value, 1);
    }

    function removeFromCart(ele) {
        modifyCart(ele.value, -1);
    }

    function modifyCart(sku, delta) {
        liveSend({'sku': sku, 'delta': delta});
    }

    function modifyBalances()

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });


</script>

{{ endblock }}